<template>
  <div>
    <div class="title">
      <div class="title-icon" />
      <div>新增分诊</div>
      <div class="button">
        <el-button type="primary" style="margin-left: 20px" @click="back">
          返回
        </el-button>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" class="tabs">
      <el-tab-pane label="基本信息" name="tab1" v-if="show('基本信息')">
        <triage-basic
          v-if="activeName == 'tab1'"
          :id="idObject"
          @getId="getId"
          :require="requireList.filter((item) => item.codeName == '基本信息')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="入院信息"
        name="tab2"
        :disabled="disabled"
        v-if="show('入院信息')"
      >
        <triage-hospitalized
          v-if="activeName == 'tab2'"
          :id="idObject"
          :key="getTimer()"
          :require="requireList.filter((item) => item.codeName == '入院信息')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="MEWS"
        name="tab3"
        :disabled="disabled"
        v-if="show('MEWS')"
      >
        <triage-mews
          v-if="activeName == 'tab3'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == 'MEWS')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="主诉症状"
        name="tab4"
        :disabled="disabled"
        v-if="show('主诉症状')"
      >
        <triage-complaint
          v-if="activeName == 'tab4'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == '主诉症状')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="体格检查"
        name="tab5"
        :disabled="disabled"
        v-if="show('体格检查')"
      >
        <triage-physique
          v-if="activeName == 'tab5'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == '体格检查')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="其他评分"
        name="tab6"
        :disabled="disabled"
        v-if="show('其他评分')"
      >
        <triage-other
          v-if="activeName == 'tab6'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == '其他评分')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="分诊结果"
        name="tab7"
        :disabled="disabled"
        v-if="show('分诊结果')"
      >
        <triage-result
          v-if="activeName == 'tab7'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == '分诊结果')"
        />
      </el-tab-pane>
      <el-tab-pane
        label="分诊去向"
        name="tab8"
        :disabled="disabled"
        v-if="show('分诊去向')"
      >
        <triage-direction
          v-if="activeName == 'tab8'"
          :id="idObject"
          :require="requireList.filter((item) => item.codeName == '分诊去向')"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TriageBasic from './component/triage-basic'
import TriageMews from './component/triage-mews'
import TriageHospitalized from './component/triage-hospitalized'
import TriageComplaint from './component/triage-complaint'
import TriagePhysique from './component/triage-physique'
import TriageOther from './component/triage-other'
import TriageResult from './component/triage-result'
import TriageDirection from './component/triage-direction'
import { selectRequiredField } from '@/api/triage/triage-new'
import { findAllMenu } from '@/api/back-management/triage-manage/menu_management'
export default {
  name: 'TriageNew',
  components: {
    TriageBasic,
    TriageMews,
    TriageHospitalized,
    TriageComplaint,
    TriagePhysique,
    TriageOther,
    TriageResult,
    TriageDirection
  },
  data() {
    return {
      activeName: 'tab1',
      disabled: true,
      idObject: {},
      requireList: [],
      useList: []
    }
  },
  created() {
    this.getId(this.$route.query)
    this.selectRequiredField()
    this.findAllMenu()
  },
  methods: {
    findAllMenu() {
      findAllMenu({ hospitalId: this.$store.getters.hospitalId }).then(
        (res) => {
          if (res.code == 0) {
            this.useList = res.data
          }
        }
      )
    },
    selectRequiredField() {
      selectRequiredField({
        hospitalId: this.$store.getters.hospitalId
      }).then((res) => {
        if (res.code == 0) {
          this.requireList = res.data.list
        }
      })
    },
    getId(obj) {
      if (obj.dispatchId && obj.patientId) {
        this.idObject = obj
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    show(name) {
      let arr = this.useList.filter((item) => item.name == name)

      return arr.length > 0 && arr[0].type == '1'
    },
    getTimer() {
      return new Date().getTime()
    },
    back() {
      this.$router.push({ path: 'triage-list' })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  margin: 20px;
}
.title-icon {
  display: inline-block;
  width: 5px;
  height: 20px;
  border-radius: 28%;
  background-color: #4380ea;
  vertical-align: middle;
  margin-right: 6px;
}
.button {
  display: flex;
  margin-left: auto;
}
.tabs {
  margin: 0 20px;
  min-height: 800px;
}
</style>
